$(function () {
    function get_data_info() {
        $.get('/admin/data/info', function (res) {
            let data = res;
            console.log(data);
            $('.totalCount em').text(data.totalArticle)
            $('.totalCount_day em').text(data.dayArticle)
            $('.commentCount em').text(data.totalComment)
            $('.commentCount_day em').text(data.dayComment)
        })
    }
    get_data_info()

    // 定义get_new_article_chars方法请求api数据后生成echarts图表
    function get_new_article_chars() {
        $.get("/admin/data/article", function (res) {
            // console.log(res);

            let data = res.date
            // console.log(data);

            //定义两个数组
            let arrX = []

            let arrY = []

            for (let i = 0; i < data.length; i++) {
                //push 推送到最后一位
                arrX.push(data[i].count)
                arrY.push(data[i].date)

            }
            console.log(arrX);//获取
            console.log(arrY);
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.getElementById('day_article_show'));
            option = {
                title: {
                    text: '堆叠区域图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: arrY
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0.5,
                        color: 'red'
                    }, {
                        offset: 1,
                        color: '#FFf'
                    }])
                },
                series: [
                    {
                        name: '直接访问',
                        type: 'line',
                        smooth: true,
                        stack: '总量',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: arrX
                    },

                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        })

    }
    // 定义get_pie_show方法
    function get_pie_show() {
        $.get("/admin/data/category", function (res) {
            // console.log(res);
            let html = res.date//拿到数据赋值给html
            console.log(html);


            const myChart = echarts.init(document.getElementById('pie_show'));
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    left: 'center',
                    data: ['西凉', '益州', '兖州', '荆州', '幽州', '长安']

                },
                series: [
                    {
                        color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#0f0'],
                        type: 'pie',
                        radius: '65%',
                        radius: ['50%', '70%'],
                        center: ['50%', '50%'],
                        data: html.map(item => ({ "name": item.name, "value": item.articles })),//取出html里面的数据
                        selectedMode: 'single',

                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
    }
    // 定义get_column_show方法
    function get_column_show() {
        $.get("/admin/data/article", function (res) {
            let arr = res.date
            console.log(arr);

            let arX = []
            let arY = []

            for (let i = 0; i < arr.length; i++) {
                arX.push(arr[i].count)
                arY.push(arr[i].date)

                console.log(arX);
                // console.log(arY);
            }

            const myChart = echarts.init(document.getElementById('column_show'));
            option = {
                xAxis: {
                    type: 'category',
                    data: arY
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    color: ['#5885e8'],
                    data: arX,
                    type: 'bar'
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
    }
    get_new_article_chars()
    get_pie_show()
    get_column_show()
})
